Documentation v8.0.14

Overview

Use over 1000 high quality vector Stockholm SVG icons as image or inline SVG element in combination with any Metronic  elements.

Image Usage

Use svg icons as image with <img>tag as shown below:
<img src="assets/media/icons/duotone/Design/Adjust.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Code/Git3.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Communication/Chat2.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Design/Brush.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Design/Sketch.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Files/File-plus.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/General/Settings-2.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Tools/Tools.svg" class="h-40px me-10"/>
<img src="assets/media/icons/duotone/Shopping/Chart-bar3.svg" class="h-40px me-10"/>

Inline Usage

Use svg icons as inline svg element in order to customize the icon size and color via CSS:
<!--begin::Svg Icon | path: icons/duotone/Design/Adjust.svg-->
<span class="svg-icon svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <path d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z" fill="#000000" fill-rule="nonzero"/>
</svg></span>
<!--end::Svg Icon-->

Icon Colors

The inline icons can be colored using .svg-icon-{color}class that defined with $theme-text-colorsvariable in sass/_variables.scss:
white
primary
secondary
light
success
info
warning
danger
dark
muted
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
<span class="svg-icon svg-icon-2x svg-icon-white"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-primary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-secondary"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-light"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-success"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-info"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-warning"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-danger"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-dark"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-muted"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-100"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-200"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-300"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-400"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-500"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-600"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-700"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-800"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x svg-icon-gray-900"><svg>...</svg></span>

Icon Sizes

The inline icons can be sized using .svg-icon-{size}class that defined with $font-sizesvariable in sass/_variables.scss
Where sizeis one of:
  • 1- sets icon size that equals to <h1>font size
  • 2- sets icon size that equals to <h2>font size
  • 3- sets icon size that equals to <h3>font size
  • 4- sets icon size that equals to <h4>font size
  • 5- sets icon size that equals to <h5>font size
  • 6- sets icon size that equals to <h6>font size
  • 7- sets icon size that equals to <h7>font size
  • 7- sets icon size that equals to 0.95 of $font-size-basewhere $font-size-base: 1rem
  • 8- sets icon size that equals to 0.85 of $font-size-basewhere $font-size-base: 1rem
  • 9- sets icon size that equals to 0.75 of $font-size-basewhere $font-size-base: 1rem
  • 10- sets icon size that equals to 0.5 of $font-size-basewhere $font-size-base: 1rem
  • base- sets icon size that equals to $font-size-basewhere $font-size-base: 1rem
  • fluid- sets icon size that equals to 100%
  • 2x- sets icon size that equals to 2 of $font-size-basewhere $font-size-base: 1rem
  • 2qx- sets icon size that equals to 2.25 of $font-size-basewhere $font-size-base: 1rem
  • 2hx- sets icon size that equals to 2.5 of $font-size-basewhere $font-size-base: 1rem
  • 2tx- sets icon size that equals to 2.75 of $font-size-basewhere $font-size-base: 1rem
  • 3x- sets icon size that equals to 3 of $font-size-basewhere $font-size-base: 1rem
  • 3qx- sets icon size that equals to 3.25 of $font-size-basewhere $font-size-base: 1rem
  • 3hx- sets icon size that equals to 3.5 of $font-size-basewhere $font-size-base: 1rem
  • 3tx- sets icon size that equals to 3.75 of $font-size-basewhere $font-size-base: 1rem
  • 4x- sets icon size that equals to 4 of $font-size-basewhere $font-size-base: 1rem
  • 4qx- sets icon size that equals to 4.25 of $font-size-basewhere $font-size-base: 1rem
  • 4hx- sets icon size that equals to 4.5 of $font-size-basewhere $font-size-base: 1rem
  • 4tx- sets icon size that equals to 4.75 of $font-size-basewhere $font-size-base: 1rem
  • 5x- sets icon size that equals to 5 of $font-size-basewhere $font-size-base: 1rem
  • 5qx- sets icon size that equals to 5.25 of $font-size-basewhere $font-size-base: 1rem
  • 5hx- sets icon size that equals to 5.5 of $font-size-basewhere $font-size-base: 1rem
  • 5tx- sets icon size that equals to 5.75 of $font-size-basewhere $font-size-base: 1rem
.icon-size-5x
.icon-size-4x
.icon-size-3x
.icon-size-2tx
.icon-size-2hx
.icon-size-2qx
.icon-size-2x
.icon-size-1
.icon-size-2
.icon-size-3
.icon-size-5
.icon-size-6
<span class="svg-icon svg-icon-5x"><svg>...</svg></span>
<span class="svg-icon svg-icon-4x"><svg>...</svg></span>
<span class="svg-icon svg-icon-3x"><svg>...</svg></span>
<span class="svg-icon svg-icon-2tx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2hx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2qx"><svg>...</svg></span>
<span class="svg-icon svg-icon-2x"><svg>...</svg></span>
<span class="svg-icon svg-icon-1"><svg>...</svg></span>
<span class="svg-icon svg-icon-2"><svg>...</svg></span>
<span class="svg-icon svg-icon-3"><svg>...</svg></span>
<span class="svg-icon svg-icon-5"><svg>...</svg></span>
<span class="svg-icon svg-icon-6"><svg>...</svg></span>
Use Height & Width  classes .w-{size} .h-{size}to set an svg element's height and width explicitly:
.h-20px .w-20px
.h-30px .w-30px
.h-40px .w-40px
.h-50px .w-50px
.h-75px .w-75px
.h-100px .w-100px
<span class="svg-icon"><svg class="h-20px w-20px">...</svg></span>
<span class="svg-icon"><svg class="h-30px w-30px">...</svg></span>
<span class="svg-icon"><svg class="h-40px w-40px">...</svg></span>
<span class="svg-icon"><svg class="h-50px w-50px">...</svg></span>
<span class="svg-icon"><svg class="h-75px w-75px">...</svg></span>
<span class="svg-icon"><svg class="h-100px w-100px">...</svg></span>

Server Side Helper

Svg icons are mostly used as embeded xml element in order to set color and size with CSS. The below PHP function can be used as reference to create a helper function for your server side language that embeds the icon's xml code on demand by just passing the icon path from the assets folder.
<?php
    function getSvgIcon($path, $iconClass = "", $svgClass = "") {
        $full_path = $path;
        if ( ! file_exists($path)) {
            return "<!-- SVG file not found: ".$path." -->";
        }

        $svg_content = file_get_contents($path);

        $dom = new DOMDocument();
        $dom->loadXML($svg_content);

        // remove unwanted comments
        $xpath = new DOMXPath($dom);
        foreach ($xpath->query("//comment()") as $comment) {
            $comment->parentNode->removeChild($comment);
        }

        // add class to svg
        if ( ! empty($svgClass)) {
            foreach ($dom->getElementsByTagName("svg") as $element) {
                $element->setAttribute("class", $svgClass);
            }
        }

        // remove unwanted tags
        $title = $dom->getElementsByTagName("title");
        if ($title["length"]) {
            $dom->documentElement->removeChild($title[0]);
        }

        $desc = $dom->getElementsByTagName("desc");
        if ($desc["length"]) {
            $dom->documentElement->removeChild($desc[0]);
        }

        $defs = $dom->getElementsByTagName("defs");
        if ($defs["length"]) {
            $dom->documentElement->removeChild($defs[0]);
        }

        // remove unwanted id attribute in g tag
        $g =  $dom->getElementsByTagName("g");
        foreach ($g as $el) {
            $el->removeAttribute("id");
        }

        $mask =  $dom->getElementsByTagName("mask");
        foreach ($mask as $el) {
            $el->removeAttribute("id");
        }

        $rect =  $dom->getElementsByTagName("rect");
        foreach ($rect as $el) {
            $el->removeAttribute("id");
        }

        $path =  $dom->getElementsByTagName("path");
        foreach ($path as $el) {
            $el->removeAttribute("id");
        }

        $circle =  $dom->getElementsByTagName("circle");
        foreach ($circle as $el) {
            $el->removeAttribute("id");
        }
        
        $use =  $dom->getElementsByTagName("use");
        foreach ($use as $el) {
            $el->removeAttribute("id");
        }

        $polygon =  $dom->getElementsByTagName("polygon");
        foreach ($polygon as $el) {
            $el->removeAttribute("id");
        }
        
        $ellipse =  $dom->getElementsByTagName("ellipse");
        foreach ($ellipse as $el) {
            $el->removeAttribute("id");
        }

        $string = $dom->saveXML($dom->documentElement);

        // remove empty lines
        $string = preg_replace("/(^[\r\n]*|[\r\n]+)[\s\t]*[\r\n]+/", "\n", $string);

        $cls = array("svg-icon");

        if ( ! empty($iconClass)) {
            $cls = array_merge($cls, explode(" ", $iconClass));
        }

        return "<span class="" . implode(" ", $cls) . "">" . $string . "</span>";
    }
?>
Use getSvgIconfunction to embed an icon svg code from assetsfolder:
<?php
    echo getSvgIcon('assets/media/icons/duotone/Design/Adjust.svg', 'svg-icon-2x svg-icon-success');
?>
The HTML output of the above PHP function call will be:
<!--begin::Svg Icon | path: icons/duotone/Design/Adjust.svg-->
<span class="svg-icon svg-icon-2x svg-icon-success"><svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
    <path d="M12,20 C7.581722,20 4,16.418278 4,12 C4,7.581722 7.581722,4 12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z M12,5.99999664 C8.6862915,6 6,8.6862915 6,12 C6,15.3137085 8.6862915,18 12,18.0000034 L12,5.99999664 Z" fill="#000000" fill-rule="nonzero"/>
</svg></span>
<!--end::Svg Icon-->

Icons Listing

Map

Direction1.svg
Direction2.svg
Position.svg
Location-arrow.svg

Cooking

Kitchen-scale.svg
Fork-spoon.svg
Cooking-book.svg
Cooking-pot.svg
Frying-pan.svg
KnifeAndFork2.svg
Fork-spoon-knife.svg
KnifeAndFork1.svg
Rolling-pin.svg
Cutting board.svg
Saucepan.svg
Baking-glove.svg

Design

Horizontal.svg
Interselect.svg
Anchor-center.svg
Anchor-left-up.svg
Anchor-right.svg
ZoomMinus.svg
Flip-horizontal.svg
Anchor-left.svg
Component.svg
Substract.svg
Difference.svg
Bezier-curve.svg
Anchor-right-up.svg
Color-profile.svg
Rectangle.svg
Verified.svg
ZoomPlus.svg
PenAndRuller.svg
Anchor-left-down.svg
Anchor-center-down.svg
Position.svg
Anchor-right-down.svg
Saturation.svg
Anchor-center-up.svg
Triangle.svg
Vertical.svg
Pen-tool-vector.svg
Flip-vertical.svg

Weather

Temperature-empty.svg
Night-fog.svg
Thunder-night.svg
Temperature-half.svg
Fahrenheit.svg
Night-rain.svg
Temperature-full.svg
Cloudy-night.svg
Cloud-sun.svg
Cloud-wind.svg
Cloud-fog.svg
Umbrella.svg
Day-rain.svg

Media

Repeat-one.svg
Volume-full.svg
Volume-Down.svg
Media-library3.svg
Media-library2.svg
Equalizer.svg
Volume-half.svg
Movie-lane1.svg
Movie-Lane2.svg
Music-note.svg
Playlist2.svg
Airplay-video.svg
Add-music.svg
Music-cloud.svg
Volume-Up.svg
Playlist1.svg
Media-library1.svg
Backward.svg

Home

Wood-horse.svg
Door-open.svg
Fireplace.svg
Commode2.svg
Air-ballon.svg
Alarm-clock.svg
Armchair.svg
Bag-chair.svg
Flashlight.svg
Building.svg
Curtains.svg
Book-open.svg
Commode1.svg
Home-heart.svg
Water-mixer.svg
Cupboard.svg

Navigation

Arrow-from-right.svg
Down-left.svg
Down-right.svg
Arrow-from-top.svg
Angle-double-left.svg
Arrow-left.svg
Angle-double-up.svg
Angle-double-down.svg
Arrow-to-left.svg
Arrow-right.svg
Up-right.svg
Arrow-from-left.svg
Arrow-down.svg
Arrow-to-up.svg
Arrow-from-bottom.svg
Double-check.svg
Angle-up.svg
Angle-left.svg
Arrows-h.svg
Arrows-v.svg
Angle-double-right.svg
Arrow-up.svg
Angle-right.svg
Arrow-to-right.svg
Angle-down.svg
Exchange.svg
Arrow-to-bottom.svg
Sign-out.svg

Layout

Layout-right-panel-2.svg
Layout-top-panel-6.svg
Layout-arrange.svg
Layout-top-panel-4.svg
Layout-horizontal.svg
Layout-top-panel-1.svg
Layout-right-panel-1.svg
Layout-octagon.svg
Layout-3d.svg
Layout-top-panel-3.svg
Layout-grid.svg
Layout-4-blocks.svg
Layout-polygon.svg
Layout-vertical.svg
Layout-top-panel-2.svg
Layout-left-panel-1.svg
Layout-top-panel-5.svg
Layout-left-panel-2.svg
Layout-4-blocks-2.svg

Electric

Gas-stove.svg
Socket-us.svg
Range-hood.svg
air-dryer.svg
Air-conditioning.svg
Highvoltage.svg
Socket-eu.svg
Shutdown.svg

Food

Glass-martini.svg
Two-bottles.svg
French Bread.svg
Ice-cream2.svg
Ice-cream1.svg
Miso-soup.svg

Communication

Chat-smile.svg
Contact1.svg
Readed-mail.svg
Group-chat.svg
Incoming-mail.svg
Chat-locked.svg
Active-call.svg
Adress-book1.svg
Outgoing-mail.svg
Adress-book2.svg
Mail-error.svg
Clipboard-list.svg
Mail-box.svg
Urgent-mail.svg
Mail-opened.svg
Snoozed-mail.svg
Mail-heart.svg
Add-user.svg
Address-card.svg
Chat-check.svg
Outgoing-box.svg
Outgoing-call.svg
Mail-notification.svg
Missed-call.svg
Dial-numbers.svg
Sending mail.svg
Shield-user.svg
Mail-attachment.svg
Incoming-call.svg
Delete-user.svg
Safe-chat.svg
Incoming-box.svg
Thumbtack.svg
Mail-locked.svg
Clipboard-check.svg
Shield-thunder.svg
Mail-unocked.svg
Reply-all.svg
Chat-error.svg

Files

Media-folder.svg
User-folder.svg
Deleted-folder.svg
Folder-star.svg
Cloud-download.svg
File-Plus.svg
Downloads-folder.svg
Locked-folder.svg
Folder-thunder.svg
Protected-file.svg
Folder-check.svg
DownloadedFile.svg
Folder-heart.svg
Folder-cloud.svg
Folder-plus.svg
File-done.svg
Folder-minus.svg
Pictures1.svg
File-Minus.svg
Uploaded-file.svg
Compiled-file.svg
Compilation.svg
Folder-solid.svg
Upload-folder.svg
File-cloud.svg
Download.svg
Deleted-file.svg
Cloud-upload.svg
Selected-file.svg
Pictures2.svg
Group-folders.svg
Folder-error.svg

General

Settings-2.svg
Settings-3.svg
Thunder-move.svg
Notification2.svg
Shield-disabled.svg
Notifications1.svg
Attachment1.svg
Clipboard.svg
Shield-check.svg
Bookmark.svg
Attachment2.svg
Duplicate.svg
Shield-protected.svg
Half-heart.svg
Expand-arrows.svg
Half-star.svg
Settings-1.svg
Scissors.svg
Binocular.svg

Tools

Angle Grinder.svg
Screwdriver.svg
Roulette.svg
Road-Cone.svg
Swiss-knife.svg

Code

-
Github.svg
Info-circle.svg
Compiling.svg
Warning-2.svg
Time-schedule.svg
Lock-circle.svg
Done-circle.svg
Settings4.svg
Warning-1-circle.svg
Backspace.svg
Left-circle.svg
Question-circle.svg
Error-circle.svg
Thunder-circle.svg
Right-circle.svg
Terminal.svg
Lock-overturning.svg

Devices

Bluetooth.svg
Laptop-macbook.svg
Gamepad1.svg
Battery-empty.svg
Cardboard-vr.svg
Generator.svg
Apple-Watch.svg
Diagnostics.svg
Display3.svg
Keyboard.svg
iPhone-back.svg
Display2.svg
iPhone-X.svg
Video-camera.svg
iPhone-x-back.svg
Hard-drive.svg
Battery-full.svg
Battery-charging.svg
Gamepad2.svg
Display1.svg
Usb-storage.svg
Headphones.svg
Battery-half.svg

Interface

Grid-Vetical.svg
Doughnut.svg
File-Plus.svg
Options-Square.svg
Grid-Horizontal.svg
Minus-Square.svg
Settings-02.svg
Map-Marker.svg
Stacked-Area-Down.svg
Briefcase.svg
Line-03-Down.svg
Envelope.svg
Scatter-Up.svg
File-Upload.svg
File-Search.svg
Sign-Out.svg
Calendar.svg
Close-Square.svg
Line-03-Up.svg
Plus-Square.svg

Shopping

Barcode-read.svg
Chart-line1.svg
Barcode-scan.svg
Chart-pie.svg
Chart-line2.svg
Chart-bar1.svg
Chart-bar2.svg
Chart-bar3.svg
Credit-card.svg
Settings.svg
Calculator.svg

Text

Text-width.svg
Align-justify.svg
Align-left.svg
Edit-text.svg
Bullet-list.svg
Strikethrough.svg
Underline.svg
Toggle-Right.svg
Toggle-Left.svg
Paragraph.svg
Align-auto.svg
Align-center.svg
Text-height.svg
Align-right.svg

Clothes

Sun-glasses.svg
Briefcase.svg
Brassiere.svg
Sneakers.svg

Activity Logs

There are 2 new tasks for you in “AirPlus Mobile APp” project:
Added at 4:23 PM by
img
Meeting with customer
Application Design
img
img
A
In Progress
View
Project Delivery Preparation
CRM System Development
img
B
Completed
View
Invitation for crafting engaging designs that speak human workshop
Sent at 4:23 PM by
img
Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
Initiated at 4:23 PM by
img
3 new application design concepts added:
Created at 4:23 PM by
img
New case #67890is assigned to you in Multi-platform Database Design project
Added at 4:23 PM by
Alice Tan
You have received a new order:
Placed at 5:05 AM by
img

Database Backup Process Completed!

Login into Metronic Admin Dashboard to make sure the data integrity is OK
Proceed
New order #67890is placed for Workshow Planning & Budget Estimation
Placed at 4:23 PM by
Jimmy Bold
Pic
Brian Cox 2 mins
How likely are you to recommend our company to your friends and family ?
5 mins You
Pic
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Pic
Brian Cox 1 Hour
Ok, Understood!
2 Hours You
Pic
You’ll receive notifications for all issues, pull requests!
Pic
Brian Cox 3 Hours
You can unwatch this repository immediately by clicking here: Keenthemes.com
4 Hours You
Pic
Most purchased Business courses during this sale!
Pic
Brian Cox 5 Hours
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
Just now You
Pic
Pic
Brian Cox Just now
Right before vacation season we have the next Big Deal for you.

Explore Metronic

Demo1

Demo2

demo
Coming soon

Demo3

demo
Coming soon

Demo4

demo
Coming soon

Demo5

Demo6

demo
Coming soon

Demo7

demo
Coming soon

Demo8

demo
Coming soon

Demo9

demo
Coming soon

Demo10

demo
Coming soon

Demo11

demo
Coming soon

Demo12

demo
Coming soon

Demo13

demo
Coming soon

Demo14

demo
Coming soon

Demo15

demo
Coming soon